import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import { Menu, Item, ItemGroup, Separator } from '@zendeskgarden/react-dropdowns';
import { MenuStory } from './stories/MenuStory';
import README from '../README.md';
import { BUTTON_TYPE, ITEMS } from './stories/data';

<Meta
  title="Packages/Dropdowns/Menu"
  component={Menu}
  subcomponents={{ Item, 'Item.Meta': Item.Meta, Separator, ItemGroup }}
  argTypes={{
    appendToNode: { control: false },
    button: {
      control: 'radio',
      options: BUTTON_TYPE
    },
    label: { name: 'Button label', table: { category: 'Story' } }
  }}
  args={{
    button: BUTTON_TYPE[0],
    items: ITEMS,
    label: 'Menu',
    maxHeight: '400px',
    placement: 'bottom-start',
    zIndex: 1000
  }}
/>

# API

<ArgsTable />

# Uncontrolled

<Canvas>
  <Story
    name="Uncontrolled"
    argTypes={{
      isExpanded: { control: false },
      focusedValue: { control: false },
      selectedItems: { control: false }
    }}
  >
    {args => <MenuStory {...args} />}
  </Story>
</Canvas>

# Controlled

<Canvas>
  <Story
    name="Controlled"
    argTypes={{
      defaultExpanded: { control: false },
      defaultFocusedValue: { control: false },
      focusedValue: { control: { type: 'text' } }
    }}
    args={{
      isExpanded: false,
      focusedValue: null,
      selectedItems: [{ value: 'aster', type: 'checkbox' }]
    }}
  >
    {args => {
      const updateArgs = useArgs()[1];
      const handleChange = changes => {
        const { type, ...rest } = changes;
        updateArgs(rest);
      };
      return <MenuStory {...args} onChange={handleChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
